<template>
    <div class="container flex flex-col items-center">
      <div class="main-content flex flex-col w-4/5">
        <el-row class="h-96">
          <el-col :span="15">
            <ScoreCard></ScoreCard>
          </el-col>
          <el-col :span="9">
            <el-card class="m-4" style="max-height: 334px">
              <radarChart :width="'300px'" :height="'350px'"></radarChart>
            </el-card>
          </el-col>
        </el-row>
        
        <el-card class="m-4">
          <BarChart1></BarChart1>
        </el-card>
        <el-row>
          <el-col :span="12">
            <el-card class="m-4">
              <Chart2 />
            </el-card>
          </el-col>
          <el-col :span="12">
            
          </el-col>
        </el-row>
        <el-card class="m-4">
          <ChinaChart />
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>


  
  import Chart2 from '@/components/chart/PieChartAll.vue'
  import radarChart from '@/components/student/chart/radarChart.vue'
  import ChinaChart from '@/components/chart/ChinaChart.vue'
  import BarChart1 from '@/components/student/chart/stuSocreChartBar.vue'
  import ScoreCard from '@/components/student/card/StudentScoreCard.vue'
  
  </script>
  
  <style scoped>
  .container {
    margin: 0 auto;
    max-width: 1200px; /* 可根据需要调整 */
  }
  .main-content {
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  </style>
  